<template>
  <div>
    <div>
      <van-form class="conform" @submit="onSubmit">
        <div class="startEnd">
          <van-field class="left" readonly clickable input-align="center" @click="selectStartCity($event)" name="startCity" :value="startCity" id="0"/>
          <div class="center">
            <van-icon name="exchange" />
          </div>
          <van-field class="right" readonly clickable input-align="center" @click="selectEndCity($event)" name="endCity" id="1" :value="endCity" />
        </div>

        <div class="travelTime">
          <van-field class="selectTravelTime" readonly clickable name="calendar" :value="travelTime" placeholder="请选择出行日期"
                     @click="showCalendar = true" />
          <van-calendar v-model="showCalendar" @confirm="onCalendar"/>
        </div>

        <div style="margin: 16px">
          <van-button class="submit" round block type="info" native-type="submit">
            确  定
          </van-button>
        </div>
      </van-form>
    </div>
    <van-popup v-model="show" round position="bottom" :style="{height: '40%'}">
      <van-area :area-list="areaList" @confirm="onConfirm" value=""/>
    </van-popup>
  </div>

</template>

<script>
import axios from "axios";
import city from "@/utils/city";

export default {
  name: "traffic",
  props: ['active'],
  data() {
    return {
      startCity: '北京',
      endCity: '上海',
      show: false,
      travelTime: '', //出行日期
      showCalendar: false,
      cityId: 0,
      areaList: {}
    }
  },
  mounted() {
    this.getNowDate();
    this.areaList = city;
    this.getAll();
  },
  methods: {
    onSubmit(values) {
      let id = this.active
      console.log('submit:', values)
    },
    getAll() {
      axios.get('./mock/city.json').then(res => {
        res = res.data;
        if (res.data) {
          const data = res.data;
          this.cities = data.cities;
          this.hotCities = data.hotCities;
          this.alphabetList = data.alphabetList;
        }
      })
    },
    getNowDate() {
      let now = new Date();
      let year = now.getFullYear();
      let month = now.getMonth() + 1;
      let day = now.getDate();
      if (month < 10) month = "0" + month;
      if (day < 10) day = "0" + day;
      this.travelTime = year+"年"+month+"月"+day+"日";
    },
    selectStartCity() {
      this.cityId = 0;
      this.show = true;
    },
    selectEndCity() {
      this.cityId = 1;
      this.show = true;
    },
    onCalendar(date) {
      let year = date.getFullYear();
      let month = date.getMonth() + 1;
      let day = date.getDate();
      if (month < 10) month = "0" + month;
      if (day < 10) day = "0" + day;
      this.travelTime = `${year}年 ${month}月 ${day}日`;
      this.showCalendar = false;
    },
    formatter(type, value) {
      if (type === 'year') {
        return `${value}年`
      } else if (type === 'month') {
        return `${value}月`
      } else if (type === 'day') {
        return `${value}日`
      }
      return value
    },
    onConfirm(value) {

      if (this.cityId == 0){
        this.startCity = value[2].name;
        this.show = false;
      } else if (this.cityId == 1) {
        this.endCity = value[2].name;
        this.show = false;
      }
    },
  }
}
</script>

<style scoped>
.startEnd{
  display: flex;
  justify-content: space-between;
  padding: .3rem .3rem .2rem .3rem;
}

.center{
  padding-top: .4rem;
  margin-left: .6rem;
  margin-right: .6rem;
}

.left, .right{
  font-size: 28px;
}

.submit, .startEnd {
  font-size: 22px;
  font-weight: 600;
}

.selectTravelTime {
  font-size: .5rem;
  padding-left: .8rem;
  margin-bottom: .6rem;
}
</style>